<template>
  <div class="company-information">
    <Breadcrumb :pathContent="content"/>
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="information-page">
        <el-form-item class="information-title">
            <h1>公司信息</h1>
        </el-form-item>
        <div class="basic-information">
          <div class="information-left-page">
            <el-form-item label="公司名称" :required="true">
                <el-input v-model="ruleForm.companyBaseInfo.company" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="区域" class="area" :required="true">
                <el-cascader
                :options="cities"
                :props="{ value: 'cityid', label: 'city', children: 'citiess' }"
                v-model="areaData"
                @change="handleCascader"
                filterable
                change-on-select
                >
                </el-cascader>
            </el-form-item> 
            <el-form-item label="邮编">
                <el-input v-model="ruleForm.companyBaseInfo.postcode" placeholder="请输入邮编"></el-input>
            </el-form-item>
            <div style="overflow: hidden;">
                <div class="information-left">
                    <el-form-item label="联系人" :required="true">
                        <el-input v-model="ruleForm.companyBaseInfo.userName" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                </div>
                <div class="information-right">
                    <el-form-item label="职位">
                        <el-input v-model="ruleForm.companyBaseInfo.position" placeholder="请输入联系人职位"></el-input>
                    </el-form-item>
                </div>
                <div class="information-left">
                    <el-form-item label="手机" :required="true">
                        <el-input v-model="ruleForm.companyBaseInfo.userPhone" placeholder="请输入联系人手机"></el-input>
                    </el-form-item>
                </div>
                <div class="information-right">
                    <el-form-item label="QQ">
                        <el-input v-model="ruleForm.companyBaseInfo.qq" placeholder="请输入QQ号码"></el-input>
                    </el-form-item>
                </div>
            </div>
            <el-form-item label="公司简介">
                <el-input type="textarea" v-model="ruleForm.companyBaseInfo.profile" :rows="4" placeholder="请输入公司简介"></el-input>
            </el-form-item>
          </div>
          <div class="information-right-page">
            <el-form-item label="公司logo" style="margin-bottom: 28px;">
                <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :http-request="sendChange"
                :on-change="onFilesAdd">
                <img v-if="ruleForm.companyBaseInfo.logo" :src="ruleForm.companyBaseInfo.logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p class="img-content">仅支持JPG, JPEG, BMP, PNG格式, 文件小于10M<br />(建议使用缕空白色图像, 最佳尺寸126 * 45px)</p>
            </el-form-item>
            <el-form-item label="详细地址" :required="true">
                <el-input v-model="ruleForm.companyBaseInfo.address" placeholder="请输入公司详细地址"></el-input>
            </el-form-item>
            <div style="overflow: hidden;">
                <div class="information-left">
                    <el-form-item label="电话">
                        <el-input v-model="ruleForm.companyBaseInfo.landline" placeholder="请输入公司电话号码"></el-input>
                    </el-form-item>
                </div>
                <div class="information-right">
                    <el-form-item label="传真">
                        <el-input v-model="ruleForm.companyBaseInfo.fax" placeholder="请输入公司传真"></el-input>
                    </el-form-item>
                </div>
            </div>
            <el-form-item label="邮箱">
                <el-input v-model="ruleForm.companyBaseInfo.email" placeholder="请输入联系人邮箱"></el-input>
            </el-form-item>
            <el-form-item label="公司网址">
                <el-input v-model="ruleForm.companyBaseInfo.url" placeholder="请输入公司网址"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item class="information-title">
            <h1>财务信息</h1>
        </el-form-item>
        <div class="financial-information">
            <div class="information-left-page">
                <el-form-item label="开户银行">
                    <el-input v-model="ruleForm.financeInfo.banks" placeholder="请输入开户银行"></el-input>
                </el-form-item>
                <el-form-item label="银行账号">
                    <el-input v-model="ruleForm.financeInfo.banksAccount" placeholder="请输入公司银行账号"></el-input>
                </el-form-item>
                <el-form-item label="发票抬头">
                    <el-input v-model="ruleForm.financeInfo.invoice" placeholder="请输入发票抬头"></el-input>
                </el-form-item>
            </div>
            <div class="information-right-page">
                <el-form-item label="开户支行">
                    <el-input v-model="ruleForm.financeInfo.branch" placeholder="请输入开户支行名称"></el-input>
                </el-form-item>
                <el-form-item label="纳税人识别号">
                    <el-input v-model="ruleForm.financeInfo.taxCode" placeholder="请输入纳税人识别号"></el-input>
                </el-form-item>
            </div>
        </div>
        <!-- <el-form-item class="information-title">
            <h1>服务热线</h1>
        </el-form-item>
            <div class="service-support">
                <div class="information-left-page">
                    <el-form-item label="对外联系人">
                        <div class="service_person">
                            <div class="item"><label>姓名</label></div>
                            <div class="item"><label>手机</label></div>
                            <div class="item"><label>QQ</label></div>
                            <div class="item"><label>邮箱</label></div>
                        </div>
                        <div class="service-input" v-for="(item,index) in ruleForm.suppliersCompanyContacts">
                            <el-input v-model="item.name" placeholder="请输入姓名"></el-input>
                            <el-input v-model="item.mobile" placeholder="请输入手机"></el-input>
                            <el-input v-model="item.qq" placeholder="请输入QQ"></el-input>
                            <el-input v-model="item.email" class="last-input" placeholder="请输入邮箱"></el-input>
                            <div class="input-delete" @click="deleteInput(index)"><i class="el-icon-delete" v-show="index !== 0"></i></div>
                        </div>
                        <div class="service-btn">
                            <el-button type="text" @click="addServiceInpput"><i class="el-icon-plus" style="margin-right: 5px;"></i>添加联系人</el-button>
                        </div>
                    </el-form-item>
                </div>
            </div> -->
        </div>
        <div class="information-btn">
            <el-form-item>
                <el-button type="primary" @click="saveForm" v-if="updatecompany">保存</el-button>
                <el-button @click="back">取消</el-button>
            </el-form-item>
        </div>
      </el-form>
  </div>
</template>
<script>
import '../../public/scss/index.scss'
import { getCompanyInformation, getQiniuPublicToken, setCompanyInformation, updateQiniu, getUuid } from '../../public/js/setting'
const Breadcrumb = () => import('@/components/common/Breadcrumb')
const ButtonFooter = () => import('@/components/common/ButtonFooter')
const cityData = require('@/data/addCities.json')
export default {
  name: 'CompanyInformation',
  data () {
    return {
      content: {
        firstTitle: '设置',
        secondTitle: '公司信息',
        type: 'close'
      },
      cities: cityData.provincesEntities,
      ruleForm: {
        id: null,
        companyBaseInfo: {
          logo: ''
        },
        financeInfo: {},
        suppliersCompanyContacts: [
          {name: '', phone: '', qq: '', email: ''},
          {name: '', phone: '', qq: '', email: ''}
        ]
      },
      imageUrlArray: {
        imageUrl: ''
      },
      areaData: [],
      qiniuUrl: window.commo.qiniuUrl,
      postData: new FormData()
    }
  },
  created () {
    getUuid().then(res => {
      if (res.status === 200) sessionStorage.setItem('uuid', res.data)
    })
    getCompanyInformation().then(res => {
      console.log(res)
      // this.ruleForm.companyBaseInfo = res.data.companyBaseInfo
      // this.ruleForm.financeInfo = res.data.financeInfo
      // this.ruleForm.suppliersCompanyContacts = res.data.suppliersCompanyContacts
      // this.areaData = res.data.companyBaseInfo.area
    })
    window.commo.showMenu(this)
  },
  methods: {
    handleCascader (val) {
      this.areaData = val
    },
    addServiceInpput () {
      this.ruleForm.suppliersCompanyContacts.push({name: '', mobile: '', qq: '', email: ''})
    },
    deleteInput (index) {
      this.ruleForm.suppliersCompanyContacts.splice(index, 1)
    },
    sendChange (req) {
      console.log('req', req)
      getQiniuPublicToken(this).then(res => {
        if (res.data.errCode === 0) return res.data.qnInfo
      }).then(res => {
        const formData = new FormData()
        formData.append('file', req.file)
        formData.append('token', res)
        formData.append('key', window.commo.uuid + '_' + this.file.name)
        updateQiniu(formData).then(res => {
          this.ruleForm.companyBaseInfo.logo = window.commo.qiniuImageUrl + res.data.key
        })
      })
    },
    onFilesAdd (file, filelist) {
      this.file = file
    },
    saveForm () {
      delete this.ruleForm.companyBaseInfo.hotLine
      this.ruleForm.companyBaseInfo.area = parseInt(this.areaData[this.areaData.length - 1])
      this.ruleForm.suppliersCompanyContacts = []
      this.ruleForm.id = parseInt(sessionStorage.getItem('companyId'))
      setCompanyInformation(this.ruleForm).then(res => {
        this.$message.success('保存成功')
        this.$router.go(-1)
      })
    },
    back () {
      this.$router.go(-1)
    }
  },
  components: {
    Breadcrumb,
    ButtonFooter
  }
}
</script>
<style lang="scss" scoped>

html{
  font-family:"微软雅黑";
}
.company-information {
    margin-bottom: 55px;
    .el-form {
        margin-top: 10px;
        background-color: white;
        overflow: auto;
        .information-page {
            padding: 20px 60px 20px 30px;
            .basic-information, .financial-information, .service-support {
                overflow: hidden;
                .information-left-page {
                    width: 47%;
                    float: left;
                }
                .information-right-page {
                    width: 47%;
                    float: right;
                }
            }
            .basic-information {
                .information-left-page {
                    .information-title {
                        .el-form-item__content {
                            margin-left: 0!important;
                        }
                    }
                    .area {
                        text-align: left;
                    }
                }
            }
            h1 {
              color: #45a2ff;
              text-align: left;
              font-size: 16px!important;
              font-family:"微软雅黑";
              height: 20px;
              margin-top: 20px;
              line-height: 20px;
              margin-bottom: 10px;
            }
        }
      .el-cascader{
        width: 100%;
      }
    }
}

.information-left {
    width: 50%;
    float: left;
}
.information-right {
    width: 50%;
    float: left;
}

.service_person {
    width: 100%;
    height: 40px;
    background-color: #eef1f9;
    margin-bottom: 10px;
    .item {
        width: 25%;
        float: left;
        text-align: left;
        font-size: 12px;
        color: #415161;
        label {
            margin-left: 10px;
        }
    }
}
.service-input {
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
    width: 100%;
    .input-delete {
        position: absolute;
        top: 0;
        right: -25px;
        cursor: pointer;
    }
    .el-input {
      width: 25%;
      float: left;
      text-align: left;
   }
}
.service-btn {
    text-align: left;
}
</style>
